<template>
  <div>
    <Card shadow>
      <div style="width: 300px;padding-top: 20px;padding-bottom: 20px;">
        <Form ref="formValidate" :rules="validateRule" :model="form" :label-width="100">
          <FormItem label="用户名" prop="name">
            <Input v-model.trim="form.name" clearable style="width: 200px" size="large" placeholder="请输入用户名"></Input>
          </FormItem>
          <FormItem label="旧密码" prop="oldPassword">
            <Input v-model="form.oldPassword" type="password" clearable style="width: 200px" placeholder="请输入旧密码"
                   size="large"></Input>
          </FormItem>
          <FormItem label="新密码" prop="newPassword">
            <Input v-model="form.newPassword" type="password" clearable style="width: 200px" placeholder="请输入新密码"
                   size="large"></Input>
          </FormItem>
        </Form>

        <cus-button style="margin-left: 100px;" @onClick="onSubmit">确认修改</cus-button>
      </div>
    </Card>
    <cus-footer></cus-footer>
  </div>
</template>

<script>
  import {modifyUserInfo, getUserBaseInfo} from '@/api/business/system'

  export default {
    name: 'personal_page',
    data() {
      return {
        form: {
          name: '',
          oldPassword: '',
          newPassword: ''
        },
        validateRule: {
        oldPassword: [
          { required: true, message: "旧密码必填", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码必填", trigger: "blur" }
        ],
        name: [{ required: true, message: "用户名必填", trigger: "blur" }]
      }
      }
    },
    mounted() {
      this.form.name = this.vuex_user.base.name;
    },
    methods: {
      onSubmit() {
        this.$refs.formValidate.validate(valid => {
          if (valid) {
            this.$cu
              .dialog({
                content: "确认修改?"
              })
              .then(() => {
                this.$Spin.show();
                this.modifyUserInfoApi().then(() => this.getUserBaseInfo());
              });
          }
        });
      },
      modifyUserInfoApi() {
        return new Promise(resolve => {
          modifyUserInfo({
            name: this.form.name,
            oldPassword: this.form.oldPassword,
            newPassword: this.form.newPassword
          }).then(res => {
            this.$Spin.hide();
            if (res.code === 1) {
              this.$Message.success('编辑成功');
              resolve();
            }
          })
        })
      },
      getUserBaseInfo() {
        return new Promise(resolve => {
          getUserBaseInfo({}).then(res => {
            if (res.code === 1) {
              res.data.token = this.vuex_user.token;
              this.$store.commit('$uStore', {
                name: 'vuex_user', value: res.data
              })
              resolve();
            }
          })
        })
      }
    }
  }
</script>

<style lang="less">

</style>
